<!--index.vue：专栏管理页面结构-->
<template>
  <div class="column-management" :class="{ 'dialog-open': detailVisible, 'fullscreen': isFullscreen }">
    <!-- 搜索区域 -->
    <div class="search-section">
      <el-card>
        <el-form :model="searchForm" inline>
          <el-form-item label="关键词">
            <el-input v-model="searchForm.keyWords" placeholder="请输入关键词" clearable />
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="searchForm.category_id" placeholder="请选择分类" clearable>
              <el-option v-for="(label, value) in categoryOptions" :key="value" :label="label" :value="value" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
              <el-option label="全部" value="" />
              <el-option v-for="(label, value) in statusOptions" :key="value" :label="label" :value="value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="success" :disabled="selectedColumns.length === 0" @click="handleBatchReview">
              批量审核 (已选中{{ selectedColumns.length }}条)
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 专栏列表 -->
    <div class="column-list">
      <el-card>
        <div slot="header">
          <span>专栏列表</span>
        </div>

        <el-table
          :key="tableKey"
          v-loading="loading"
          :data="columnList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="48" />
          <el-table-column prop="name" label="专栏名称" width="200" show-overflow-tooltip />
          <el-table-column prop="cover" label="封面" width="140">
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.cover"
                style="width: 120px; height: 72px"
                :src="scope.row.cover"
                fit="cover"
                :preview-src-list="[scope.row.cover]"
              />
              <span v-else>无封面</span>
            </template>
          </el-table-column>
          <el-table-column prop="categoryName" label="分类" width="120" align="center">
            <template slot-scope="scope">
              <el-tag :type="getCategoryTagType(scope.row.categoryId)">
                {{ scope.row.categoryName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120" align="center">
            <template slot-scope="scope">
              <el-tag :type="getStatusTagType(scope.row.status)">
                {{ getStatusLabel(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="authorName" label="作者" width="120" />
          <el-table-column prop="articleCount" label="文章数" width="100" align="center" />
          <el-table-column prop="subscriptionCount" label="订阅数" width="100" align="center" />
          <el-table-column label="操作" width="280" fixed="right" align="center">
            <template slot-scope="scope">
              <div class="action-buttons">
                <el-button size="mini" type="primary" @click="viewDetail(scope.row)">详情</el-button>
                <el-button v-if="canToggleStatus(scope.row.status)" size="mini" type="success" @click="handleEnable(scope.row)">启用</el-button>
                <el-button v-if="canToggleStatus(scope.row.status)" size="mini" type="warning" @click="handleDisable(scope.row)">停用</el-button>
                <el-button v-if="canDelete(scope.row.status)" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                <el-button v-if="canRestore(scope.row.status)" size="mini" type="info" @click="handleRestore(scope.row)">恢复</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-wrapper">
          <el-pagination
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchForm.pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 专栏详情右侧显示组件 -->
    <div v-if="detailVisible && columnDetail" class="right-side-detail-panel" :class="{ 'fullscreen': isFullscreen }">
      <div class="detail-header">
        <h3 class="header-title">
          <i class="el-icon-document title-icon" />
          专栏详情
        </h3>
        <div class="header-actions">
          <el-button type="primary" size="small" @click="toggleFullscreen">
            <i :class="isFullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen'" />
            {{ isFullscreen ? '退出全屏' : '全屏' }}
          </el-button>
          <el-button size="small" @click="closeDetail">
            <i class="el-icon-close" />
            关闭
          </el-button>
        </div>
      </div>

      <div class="detail-content">
        <!-- 基本信息 -->
        <div class="detail-section">
          <div class="section-header">
            <h4 class="section-title">
              <i class="el-icon-info title-icon" />
              基本信息
            </h4>
            <span class="section-badge" :class="`status-${columnDetail.status}`">
              {{ getStatusLabel(columnDetail.status) }}
            </span>
          </div>
          <div class="section-content">
            <div class="info-item">
              <span class="info-label">专栏名称</span>
              <span class="info-value">{{ columnDetail.name }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">专栏描述</span>
              <span class="info-value">{{ columnDetail.description || '暂无描述' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">专栏封面</span>
              <div class="info-value cover-image">
                <el-image
                  v-if="columnDetail.cover"
                  class="cover-img"
                  :src="columnDetail.cover"
                  fit="cover"
                  :preview-src-list="[columnDetail.cover]"
                />
                <span v-else>暂无封面</span>
              </div>
            </div>
            <div class="info-item">
              <span class="info-label">作者</span>
              <span class="info-value">{{ columnDetail.authorName }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">分类</span>
              <span class="info-value">{{ columnDetail.categoryName }}</span>
            </div>
            <div v-if="columnDetail.tags && columnDetail.tags.length > 0" class="info-item">
              <span class="info-label">标签</span>
              <div class="info-value tags">
                <el-tag v-for="tag in columnDetail.tags" :key="tag" size="small">{{ tag }}</el-tag>
              </div>
            </div>
          </div>
        </div>

        <!-- 统计数据 -->
        <div class="detail-section">
          <div class="section-header">
            <h4 class="section-title">
              <i class="el-icon-data-analysis title-icon" />
              统计数据
            </h4>
          </div>
          <div class="section-content">
            <div class="stats-grid">
              <div class="stat-item">
                <div class="stat-value">{{ formatNumber(columnDetail.articleCount) }}</div>
                <div class="stat-label">文章数</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ formatNumber(columnDetail.subscriptionCount) }}</div>
                <div class="stat-label">订阅数</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ formatNumber(columnDetail.totalViews) }}</div>
                <div class="stat-label">总浏览量</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ formatNumber(columnDetail.totalLikes) }}</div>
                <div class="stat-label">总点赞数</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 时间信息 -->
        <div class="detail-section">
          <div class="section-header">
            <h4 class="section-title">
              <i class="el-icon-time title-icon" />
              时间信息
            </h4>
          </div>
          <div class="section-content">
            <div class="info-item">
              <span class="info-label">创建时间</span>
              <span class="info-value">{{ formatTime(columnDetail.createdAt) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">更新时间</span>
              <span class="info-value">{{ formatTime(columnDetail.updatedAt) }}</span>
            </div>
            <div v-if="columnDetail.reviewerName" class="info-item">
              <span class="info-label">审核人</span>
              <span class="info-value">{{ columnDetail.reviewerName }}</span>
            </div>
            <div v-if="columnDetail.reviewMessage" class="info-item">
              <span class="info-label">审核意见</span>
              <span class="info-value">{{ columnDetail.reviewMessage }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 审核对话框 -->
    <el-dialog
      title="审核专栏"
      :visible.sync="reviewVisible"
      width="500px"
      class="review-dialog"
      :close-on-click-modal="false"
    >
      <el-form :model="reviewForm" label-width="80px">
        <el-form-item label="审核结果" required>
          <el-radio-group v-model="reviewForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input
            v-model="reviewForm.reviewMessage"
            type="textarea"
            :rows="4"
            placeholder="请输入审核意见（可选）"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reviewVisible = false">取消</el-button>
        <el-button type="primary" :loading="submittingReview" @click="submitReview">确定</el-button>
      </div>
    </el-dialog>

    <!-- 批量审核对话框 -->
    <el-dialog
      title="批量审核专栏"
      :visible.sync="batchReviewVisible"
      width="500px"
      class="review-dialog"
      :close-on-click-modal="false"
    >
      <el-form :model="batchReviewForm" label-width="80px">
        <el-form-item label="审核结果" required>
          <el-radio-group v-model="batchReviewForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input
            v-model="batchReviewForm.reviewMessage"
            type="textarea"
            :rows="4"
            placeholder="请输入审核意见（可选）"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="batchReviewVisible = false">取消</el-button>
        <el-button type="primary" :loading="submittingReview" @click="submitBatchReview">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import columnMixin from '@/mixins/columnMixin'

export default {
  name: 'ColumnManagement',
  mixins: [columnMixin]
}
</script>

<style lang="scss" scoped>
@import '@/styles/column.scss';
</style>
